<template>
  <div class="app">
      <myNavbar title="商家"></myNavbar>
      <div class="cashier-picture">

        <image  class="cashier-picture-iamge" :src="merchantDetails.doorPhoto"></image>
        <!--        <image  class="cashier-picture-iamge" src="https://exp-picture.cdn.bcebos.com/9a8fd9f88a775ddd733dc7f9a427e7ef2906f9c4.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_jpg%2Fquality%2Cq_80"></image>-->
      </div>
      <div class="cashier-name">
        <text class="cashier-name-text">陈家村</text>
      </div>
      <div class="paymentAmount">
        <div class="paymentAmount-input-div">
          <text class="paymentAmount-input-text" style="margin-right: 20px">¥</text>
<!--          <input placeholder="请输入付款金额" class="cash-center-input"/>-->
          <input class="cash-center-input cash-center-input" v-model="amount" name="input" type="number" :maxlength="maxlength"   placeholder="请输入付款金额" />
        </div>
      </div>
      <div class="paymentMethod">
        <div class="paymentMethod-contain">

          <div class="WeChat" @click="changeClick" data-type="weixinAppPayPlugin">
            <div class="weChat-contain">
              <text class="weChat-title">微信支付</text>
              <text class="weChat-message" >微信安全支付</text>
            </div>
            <div class="weChat-image-wrap">
              <image  src='https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/321_20211212231449.png' v-if="paymentType=='weixinAppPayPlugin'"  class="weChat-image"></image>
              <image  src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/31_20211212231436.png"  v-else  class="weChat-image-notselected"></image>
            </div>
          </div>
          <div class="Alipay" @click="changeClick" data-type="alipayAppPlugin" >
            <div class="weChat-contain">
              <text class="weChat-title">支付宝支付</text>
              <text class="weChat-message" >支付宝安全支付</text>
            </div>
            <div class="weChat-image-wrap">
              <image src='https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/321_20211212231449.png' v-if="paymentType=='alipayAppPlugin'" class="weChat-image"></image>
              <image src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/31_20211212231436.png" v-else class="weChat-image-notselected"></image>
            </div>
          </div>
        </div>
      </div>
      <div class="confirmThepayment">
        <div class="confirmThepayment-button" @click="confirmThepayment">
          <text class="confirmThepayment-button-text">确认付款</text>
        </div>
      </div>
  </div>
</template>

<script>

import {
  find
} from '@/api/shop'
import myNavbar from '../../../components/myNavbar/myNavbar.vue'
import {submit, query, collection} from '../../../api/payment';
const pay = app.requireModule("eeui/pay");

export default {
  name: "nearbyShopsDetails.vue",
  data() {
    return {
      paymentType:"alipayAppPlugin",
      amount:'',
      merchantDetails:{}
    };
  },
  components: {
    myNavbar
  },
  created() {
    console.log("1111111111111111111111")
    this.merchantDetails = app.config.params
    console.log(app.config.params)
    console.log("1111111111111111111111")
  },
  methods: {
    changeClick(data){
      this.paymentType = data.target.attr.dataType
    },
    confirmThepayment(){
      var _this = this
      if(_this.amount<=0|| _this.amount == null ){
        eeui.toast('请输入付款金额')
        return;
      }
      let params = {
        amount:this.amount,
        mchId:this.getGlobalData().mchId,
        paymentPluginId:this.paymentType,
        shopId:this.merchantDetails.id
      }
      console.log("111111111111111111111111111111111111")
      console.log(params)
      console.log("2222222222222222222222222222222222222222")
      collection(params).then(res=>{
        console.log(res.data.sn)
        this.submitClick(res.data.sn)
      })
    },

    submitClick(data){
      var _this = this
      console.log(data)
      let paymentsn=data
      //微信支付
      if(this.paymentType=='weixinAppPayPlugin'){

        submit({
          paymentPluginId:'weixinAppPayPlugin',
          sn:data
        }).then(res=>{
          console.info(res)
          if (res.type == 'success') {
            pay.weixin({
              appid: res.data.appid,
              partnerid: res.data.partnerid,
              prepayid: res.data.prepayid,
              package: res.data.package,
              noncestr: res.data.noncestr,
              timestamp: res.data.timestamp,
              sign: res.data.paySign,
            }, result => {
              console.log(result, '微信支付查看')
              if (result.status == 0) {
                _this.queryClick(paymentsn)
                eeui.closePage()
              } else if (result.status == -1) {
                eeui.toast('服务器出错，请稍后重试')
                eeui.closePage()
                console.log('支付失败3')
              } else if (result.status == -2) {
                eeui.toast('您已取消支付')
                eeui.closePage()
                console.log('支付失败4')
              } else if (result.status == -999) {
                eeui.toast('开启微信失败')
                eeui.closePage()
                console.log('支付失败5')
              }
            })
          } else {
            eeui.toast('支付失败')
            console.log('支付失败6')
            eeui.closePage()
          }
        }).catch(error=>{
          console.log(error)
        })
      } else if(this.paymentType=='alipayAppPlugin'){
        //  支付宝支付
        console.log("88888888888888888888888888888")
        submit({
          paymentPluginId: 'alipayAppPlugin',
          sn: data
        }).then(res => {
          console.log('支付')
          console.info(res)
          if (res.type == 'success') {
            pay.alipay(res.data.payData, result => {
              console.log(result, '支付宝支付查看')
              if (result.status == 9000) {
                return false
                _this.queryClick(paymentsn)
                eeui.closePage()
              }
            })
          }
        }).catch(error => {
          _this.queryClick(paymentsn)
          eeui.toast('支付失败')
          eeui.closePage()
        })
      }
    },
    queryClick(data) {
      var _this = this
      query({
        sn: data
      }).then(res => {
        eeui.closePage()
        console.log(res)
      }).catch(error => {
        console.log(error.content)
        eeui.closePage()
      })
    },
  }

}
</script>
<style scoped>
.app {
  flex: 1;
  background-color: rgb(248, 248, 248);
}
.cashier-picture{
  margin-top: 70px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 750px;
}
.cashier-picture-iamge{
  width: 150px;
  height: 150px;
}
.cashier-name-text{
  font-size:40px;
  font-weight: bold;
  text-align: center;
}
.cashier-name{
  margin-top:35px;
  display: flex;
  justify-content: center;
  width: 750px;
  height: 45px;
}


.paymentAmount{
  width: 750px;
}
.paymentAmount-input-div{
  box-sizing: border-box;
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 700px;
  margin-left: 25px;
  background-color: white;
  padding-left: 50px;
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: 16px;
}
.paymentAmount-input-text{
  font-size:35px;
  font-weight: bold;
}
.paymentAmount-input-contain{
  margin-left:20px;
}

.paymentMethod{
  margin-top: 20px;
}
.paymentMethod-contain{
  margin-left: 25px;
  background-color: white;
  border-radius: 16px;
  width: 700px;
  height: 260px;
}
.WeChat{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 130px;
  border-bottom: 1px;
  border-bottom-style: solid;
  border-bottom-color:lightgray;
}
.weChat-contain{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.Alipay{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 130px;
  border-bottom: 1px;
  border-bottom-style: solid;
  border-bottom-color:lightgray;
}
.weChat-title{
  padding-left: 35px;
  font-size:30px;
  margin-bottom: 10px;
}
.weChat-message{
  padding-left: 35px;
  font-size:26px;
  color:#a39992;
}
.weChat-image-wrap{
  width: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.weChat-image{
  width: 40px;
  height: 40px;
  /* background-color: orange; */
  border-radius: 50px;
}
.weChat-image-notselected{
  width: 40px;
  height: 40px;
  /* background-color: red; */
  border-radius: 50px;
}


.cash-center-input {
  background-color: #fff;
  flex: 1;
  min-height: 65px;
}














.confirmThepayment{
  position: fixed;
  bottom: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 750px;
  height:120px;
  background-color: white;
}
.confirmThepayment-button{
  display: flex;
  justify-content: center;
  align-items: center;
  width:700px;
  height:80px;
  border-radius: 50px;
  background-color:#fd6821;
}
.confirmThepayment-button-text{
  color: white;
  font-size: 32px;
}
</style>
